<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html xmlns:th="" lang="zh-CN">
<%@include file="/WEB-INF/pages/base/include.jsp"%>
<body>
<div id="wrapper">
    <%@include file="/WEB-INF/pages/base/menu.jsp"%>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">商品管理</h3>
            </div>
        </div>
        <div class="row">
            <form class="form-horizontal" data-parsley-validate>
                <div class="col-lg-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">商品基本信息</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品名称：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="title" class="form-control" placeholder="请输入商品名称"
                                                   required>
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品供货商：</label>
                                        <div class="col-lg-8">
                                            <select class="form-control" id="belong">
                                                <option value="1">星品</option>
                                                <option value="2">认证用户</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品状态：</label>
                                        <div class="col-lg-8">
                                            <select class="form-control" id="deleteAt">
                                                <option value="0">上架</option>
                                                <option value="1">下架</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品库存：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="stockCount" class="form-control" placeholder="请输入商品库存"
                                                   required>
                                        </div>
                                        <div class="col-lg-2 clo-md-2">
                                            <span class="help-block">*必须填写</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品供货价：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="marketPrice" class="form-control"
                                                   placeholder="请输入商品供货价">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">商品销售价：</label>
                                        <div class="col-lg-8">
                                            <input type="text" id="salePrice" class="form-control"
                                                   placeholder="请输入商品销售价">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-12 control-label">商品照片：</label>
                                        <div class="col-lg-10 col-md-12 ">
                                            <button class="btn btn-default" id="photoUpload_1">上传图片</button>
                                            <div class="clearfix"></div>
                                            <span class="help-block" style="display: inline-block;">(1~3张图片)</span>
                                            <input type="hidden" name="attachmentUuid_1"/>
                                            <input type="hidden" name="attachmentUrl_1"
                                                   value="http://img.hb.aicdn.com/761f1bce319b745e663fed957606b4b5d167b9bff70a-nfBc9N_fw580"/>
                                        </div>
                                    </div>
                                    <div class="form-group no-filereader-hidden">
                                        <label class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <div class="tag-wrapper" id="attachmentTag_1"></div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-12 control-label">商品详情图片：</label>
                                        <div class="col-lg-10 col-md-12">
                                            <button class="btn btn-default" id="photoUpload_2" type="button">上传图片
                                            </button>
                                            <div class="clearfix"></div>
                                            <span class="help-block">(1~20张图片)</span>
                                            <input type="hidden" name="attachmentUuid_2"/>
                                            <input type="hidden" name="attachmentUrl_2"
                                                   value="http://img.hb.aicdn.com/761f1bce319b745e663fed957606b4b5d167b9bff70a-nfBc9N_fw580"/>
                                        </div>
                                    </div>
                                    <div class="form-group no-filereader-hidden">
                                        <label class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <div class="tag-wrapper" id="attachmentTag_2">
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="form-group">
                                        <label class="col-lg-2 clo-md-2 control-label">发起人寄语：</label>
                                        <div class="col-lg-8">
                                            <textarea class="form-control" rows="3" id="message"
                                                      placeholder="请输入寄语"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <button type="button" class="btn btn-primary" onclick="product_add()"
                        style="margin-left:15px;margin-bottom:30px;">发布
                </button>
                <button class="btn btn-default" id="cancel" style="margin-left:15px;margin-bottom:30px;">
                    取消
                </button>
            </form>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('#cancel').click(function () {
            window.location.href = "${webPath}toProduct";
        })
    });
    var initDatetimepicker = function () {
//        $('#manufacturerDate').datetimepicker({
//            format: 'YYYY-M-DD',
//            locale: 'zh-CN',
//            defaultDate: false,
//            sideBySide: true
//        });
//        $('#dueDate').datetimepicker({
//            format: 'YYYY-M-DD',
//            locale: 'zh-CN',
//            defaultDate: false,
//            sideBySide: true
//        });
        /*$('#startDate').datetimepicker({
         format: 'YYYY-M-DD HH:mm:ss',
         locale: 'zh-CN',
         defaultDate: false,
         sideBySide: true
         });
         $('#endDate').datetimepicker({
         format: 'YYYY-M-DD HH:mm:ss',
         locale: 'zh-CN',
         defaultDate: false,
         sideBySide: true
         });
         $("#startDate").on("dp.change", function (e) {
         $('#endDate').data("DateTimePicker").minDate(e.date);
         });
         $("#endDate").on("dp.change", function (e) {
         $('#startDate').data("DateTimePicker").maxDate(e.date);
         });
         $('#active_startDate').datetimepicker({
         format: 'YYYY-M-DD HH:mm:ss',
         locale: 'zh-CN',
         defaultDate: false,
         sideBySide: true
         });
         $('#active_endDate').datetimepicker({
         format: 'YYYY-M-DD HH:mm:ss',
         locale: 'zh-CN',
         defaultDate: false,
         sideBySide: true
         });
         $("#active_startDate").on("dp.change", function (e) {
         $('#active_endDate').data("DateTimePicker").minDate(e.date);
         });
         $("#active_endDate").on("dp.change", function (e) {
         $('#active_startDate').data("DateTimePicker").maxDate(e.date);
         });*/
    }
    initDatetimepicker();

    $(document).ready(function (e) {
        var attachementList = [],
                attachementUrl = [];
        var updateUpload = function () {
            $('input[name="attachmentUuid_1"]').val(JSON.stringify({attachment: attachementList}));
            $('input[name="attachmentUrl_1"]').val(attachementUrl);
        };
        var updateImage = function () {
            if (attachementUrl.length == 0) {
                return
            } else {
                attachementUrl.forEach(function (attachment, index) {
                    $('#attachmentTag_1').append('<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename"></span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href="+attachment+" data-lightbox="example-set"><img src=' + attachment + ' style="width:100%; height:auto;"/ alt="" /></a></div></div></div>')
                })
            }
            $('input[name="attachmentUrl_1"]').val(attachementUrl);
        };
        updateImage();
        var ajaxUpload = new AjaxUpload($('#photoUpload_1'), {
            action: '${webPath}/file/uploadImage',
            data: {
                "json_package": JSON.stringify({
                    "head": {},
                    "body": {"file": "file"}
                })
            },
            name: 'file',
            onSubmit: function (file, ext) {
                window.uploading = true;
                $('#photoUpload_1').text('上传中...');
                $('#photoUpload_1').attr('disabled', true);
                this.disable();

            },
            onChange: function (file, extension) {
                this.disable();
            },
            onComplete: function (file, response) {
                var data = JSON.parse(response);
                attachementUrl.push(data.body.fileUrl);
                attachementList.push(data.body.fileUrl);
                console.log(data.body.fileUrl);
                updateUpload();
                var fileName = file.length > 25 ? file.substring(0, 24) + "..." : file;
                $('#attachmentTag_1').append('<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename">' + fileName + ' </span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href=' + data.body.fileUrl + ' data-lightbox="example-set"><img src=' + data.body.fileUrl + ' style="width:100%; height:auto;"/></a></div></div></div>');
                window.uploading = false;
                $('#photoUpload_1').text('上传图片');
                this.enable();
            }
        });
//        setTimeout("ajaxUpload()", 2000);

        $("#attachmentTag_1").on('click', ".attachment-tag .close", function (e) {
            e.stopPropagation();
            var targetTag = $(this).parents('.attachment-tag');
            var order = $("#attachmentTag_1 .attachment-tag").index(targetTag);
            if (order > -1) {
                attachementList.splice(order, 1);
                attachementUrl.splice(order, 1);
                updateUpload();
                $(this).parents('.col-lg-3').remove();
            }
            return false
        });
    });

    $(document).ready(function (e) {
        var attachementList = [],
                attachementUrl = [];
        var updateUpload = function () {
        	$('input[name="attachmentUuid_2"]').val(JSON.stringify({attachment: attachementList}));
            $('input[name="attachmentUrl_2"]').val(attachementUrl);
            $('input[name="attachmentUrl_2"]').val(descs);
        };
        var updateImage = function () {
            if (attachementUrl.length == 0) {
                return
            } else {
                attachementUrl.forEach(function (attachment, index) {
                    $('#attachmentTag_2').append('<div class="col-lg-3 col-md-4" style="padding-left:0px;"><div class="tag-box attachment-tag uploadifive-queue-item"><span class="icon-attachment"></span><span class="filename"></span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true" style="color:#fff;">&times;</span></span><div class="tag-box-lower"><a href="+attachment+" data-lightbox="example-set"><img src=' + attachment + ' style="width:100%; height:auto;"/ alt="" /></a></div></div></div>')
                })
            }
            $('input[name="attachmentUrl_2"]').val(attachementUrl);
        };
        updateImage();
        $('#photoUpload_2').uploadifive({
            'uploadScript': '${webPath}/file/uploadImage',
            'buttonText': '批量上传',
            'buttonClass': 'btn btn-default',
            'fileObjName': 'file',
            'height': '35px',
            'fileSizeLimit': '30MB',
            'width': '100px',
            //- 'uploadLimit': 1,
            'onUploadFile': function (file) {
                window.uploading = true;
            },
            'onUpload': function (filesToUpload) {
                window.uploading = true;
            },
            'itemTemplate': '<div class="tag-box attachment-tag uploadifive-queue-item" style="padding-left:0px;"><span class="icon-attachment"></span><span class="filename"></span><span class="fileinfo"></span><span type="button" aria-hidden="close" class="close"><span aria-hidden="true">&times;</span></span><div class="progress"><div class="progress-bar"></div></div></div>',
            'onUploadComplete': function (file, data) {
                attachementUrl.push(JSON.parse(data).body.fileUrl);
                attachementList.push(JSON.parse(data).body.fileUrl);
                updateUpload();
                window.uploading = false;
            },
            'onCancel': function (file, index) {
                if (index > -1) {
                    attachementList.splice(index, 1);
                }
                updateUpload();
                window.uploading = false;
            }
        });

        $("#attachmentTag_2").on('click', ".attachment-tag .close", function (e) {
            e.stopPropagation();
            var targetTag = $(this).parents('.attachment-tag');
            var order = $("#attachmentTag_2 .attachment-tag").index(targetTag);
            if (order > -1) {
                attachementList.splice(order, 1);
                attachementUrl.splice(order, 1);
                updateUpload();
                $(this).parents('.col-lg-3').remove();
            }
            return false
        });
    });
    $(document).ready(function (e) {
        $('#pro_info').keydown(function () {
            var len = $(this).val().length;
            if (len >= 100) {
                var num = $(this).val().substring(0, 99);
                $(this).val(num);
                alert("超过字数限制")
            }
        })
    });
    $(document).ready(function (e) {
        $('#pro_desc').keydown(function () {
            var len = $(this).val().length;
            if (len >= 140) {
                var num = $(this).val().substring(0, 139);
                $(this).val(num);
                alert("超过字数限制")
            }
        })
    });

    function product_add() {
        var baseURL = "${webPath}/product/create";
        var title = $('#title').val();
        var message = $('#message').val();
        var stockCount = $('#stockCount').val();
        var marketPrice = $('#marketPrice').val();
        var salePrice = $('#salePrice').val();
        var belong = $('#belong option:selected').val();
        var deleteAt = $('#deleteAt option:selected').val();
        var attachmentUrl_1 = $('input[name="attachmentUrl_1"]').val();
        var attachmentUrl_2 = $('input[name="attachmentUrl_2"]').val();
        var imageList = attachmentUrl_1.split(",");
        var descList = attachmentUrl_2.split(",");
        var json_package = {
       		"head": {},
            "body": {
                "title": title,
                "message": message,
                "stockCount": stockCount,
                "marketPrice": marketPrice,
                "salePrice": salePrice,
                "belong": belong,
                "deleteAt": deleteAt,
                "imageList": imageList,
                "descList": descList
            }
        };
        $.post(baseURL, {"json_package": JSON.stringify(json_package)}, function (result) {
            if (typeof result == 'string') result = JSON.parse(result);
            if (result.body.result == '0') {
                alert('添加成功！')
                var productUuid = result.body.productUuid;
                window.location.href="${webPath}toProductEdit/"+productUuid;
                //window.location.reload(true);
            } else {
                alert('缺少必填项！')
            }
        })
    }
</script>
</body>
</html>